<template>
  <el-dialog
    width="70%"
    :title="title"
    :visible.sync="newKeyPersonVisible"
    append-to-body
    :close-on-click-modal=false
    :before-close="handleClose"
  >
    <el-form
      ref="formDataRef"
      :model="formData"
      :rules="formDataRules"
      :label-position="labelPosition"
      label-width="90px"
    >
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="关键人类型" required prop="keyPersonType">
            <el-select
              @change="keyPersonTypeChange"
              v-model="formData.keyPersonType"
              placeholder="请选择"
              class="u-select"
            >
              <el-option
                v-for="item in keyPersonType"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关键人名称" required prop="keyPersonName">
            <el-input
              placeholder=""
              v-model="formData.keyPersonName"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              v-model="formData.birthday"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="department">
            <el-input
              placeholder=""
              v-model="formData.dept"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务" prop="position">
            <el-input
              placeholder=""
              v-model="formData.position"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input
              placeholder=""
              v-model="formData.contactPhone"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子邮箱" prop="email">
            <el-input
              placeholder=""
              v-model="formData.contactEmail"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="决策影响力" prop="decisionMaking">
            <el-input
              placeholder=""
              v-model="formData.decisionAffect"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btnBox">
      <el-button type="primary" class="confirmBtn" @click="confirm"
        >提交</el-button
      >
      <el-button type="info" class="returnBtn" @click="closeShow"
        >取消</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    newKeyPersonVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '新建关键人信息',
    },
    keyPersonType: {
      type: Array,
      default: [],
    },
    formData: {
      type: Object,
      default: {},
    },
  },
  name: "NewKeyPersonAdd",
  data() {
    return {
      labelPosition: "left",
      // formData: {
      //   // 关键人类型
      //   keyPersonTypeValue: "",
      //   keyPersonName: "", //关键人名称
      //   birthday: "", //生日
      //   dept: "", //部门
      //   position: "", //职务
      //   contactPhone: "", //联系电话
      //   decisionAffect: "", //电子邮箱
      //   decisionMaking: "", //决策影响力
      // },
      formDataRules: {
        keyPersonType: [
          { required: true, message: "请选择关键人类型", trigger: "change" },
        ],
        keyPersonName: [
          { required: true, message: "请输入关键人名称", trigger: "blur" },
        ],
        contactPhone:[
          {
            message: "办公电话格式不正确",
            pattern: /^[\d]+([\d-+]*)$/,
            trigger: "blur",
          },
          { min: 6, message: "移动电话长度不能小于6位", trigger: "blur" },
        ]
      },
    };
  },
  components: {},
  created() {
  },
  mounted() {
  },
  methods: {
    //关键人信息类型
    keyPersonTypeChange(val) {
      
    },
    confirm() {
      this.$refs.formDataRef.validate((valid) => {
        if (valid) {
          this.$emit("addKeyInfo", this.formData);
        } else {
          return false;
        }
      });
    },
    closeShow() {
      this.$emit("closeDialog");
      this.$nextTick(() => {
        this.$refs.formDataRef.resetFields();
      });
    },
    handleClose() {
      this.$emit("closeDialog");
      this.$nextTick(() => {
        this.$refs.formDataRef.resetFields();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.form-con {
  margin-top: 0.3rem;
}
.u-select {
  width: 100%;
}
.el-input {
  width: 100%;
}
.btnBox {
  width: 100%;
  text-align: center;
}
.confirmBtn {
  width: 80px;
  background: #467cd4;
  color: #fff;
  margin: 10px 0;
}
.returnBtn {
  width: 80px;
  background: #467cd4;
  color: #fff;
  margin: 10px;
}
</style>
